<template>
  <view>
    <view class="sales">
      <view class="sales-bg-content">
        <view class="sales-bg" :style="{ 'background-image': 'url('+ data.avatar +')' }"></view>
      </view>
      <view class="sales-img">
        <image :src="data.avatar" :style="{ width: '164rpx', height: '164rpx' }" mode="aspectFill" />
      </view>
      <view class="buy-btn" style="width: 100px;">
        <u-button type="primary" size="small" :color="$u.color.mainColor" v-if="!isLink">敬请期待</u-button>
        <template v-else>
          <u-button type="primary" size="small" :color="$u.color.mainColor" @click="craeteOrder()" v-if="data.inventory > 0">立即秒杀</u-button>
          <u-button size="small" :color="$u.color.bgColor" @click="craeteOrder()" v-else>已抢完</u-button>
        </template>
      </view>
      <view style="padding-left: 100px; height: 40px;">
        <view class="u-m-20">
          <u-line-progress :percentage="100 - (data.inventory / data.totalInventory)"
            :activeColor="$u.color.mainColor"></u-line-progress>
          <view class="u-m-t-5">
            <u-text :text="`已抢购${data.totalInventory - data.inventory}，剩余库存${data.inventory}`" :color="$u.color.tipsColor" size="12" />
          </view>
        </view>
      </view>
      <view class="u-m-l-30 u-m-r-30 u-m-t-20 u-m-b-20">
        <view class="flex-block" style="height: 100%;">
          <view class="flex-block flex-col" style="height: 100%; flex: 1; width: 0;">
            <view class="sales-title txt-normal">{{ data.skuName || data.name || '未知商品' }}</view>
            <view class="u-m-t-5" style="flex: 1;">
              <u-text :text="data.subTitle" :color="$u.color.lightColor" size="12" />
            </view>
          </view>
          <view>
            <view style="width: 100%;">
              <u-text :text="'¥' + allPrice" :color="$u.color.warning" size="20" align="right" />
            </view>
            <view class="flex-block u-m-t-5" style="justify-content: flex-end;">
              <uni-number-box
                v-model="numberValue"
                :min="1"
                :max="data.purchaseLimit"
              ></uni-number-box>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useSeckillStore } from '@/stores/seckill'
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    activityId: {
      type: String,
      default: ''
    },
    isLink: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      numberValue: 1,
      seckillStore: useSeckillStore()
    }
  },
  computed: {
    allPrice() {
      let val = this.data.price * this.numberValue
      val = parseFloat(val.toFixed(2))
      return val
    }
  },
  methods: {
    craeteOrder() {
      const params = {
        activityId: this.activityId,
        id: this.data.id,
        quantity: this.numberValue,
        goodsInfo: [{...this.data, quantity: this.numberValue}]
      }
      this.seckillStore.setData(params)
      uni.navigateTo({
        url: '/pages/create-activity-order/create-activity-order'
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.sales {
  height: auto;
  box-sizing: border-box;
  margin: 10px;
  border: 1rpx solid $u-border-color;
  border-radius: 5px;
  overflow: hidden;
  position: relative;

  .sales-bg-content {
    width: 100%;
    height: 50px;
    overflow: hidden;
  }

  &-bg {
    width: 100%;
    height: 50px;
    background-size: 120% auto;
    background-position: center center;
    filter: blur(4px) brightness(0.8) saturate(0.5); /* 添加模糊和亮度调节 */
  }
  &-img {
    position: absolute;
    left: 15px;
    top: 15px;
    border-radius: 5px;
    overflow: hidden;
    border: 4rpx solid #ffffff;
  }
}
.sales-dynamic {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx;
  border: 1rpx solid #eeeeee;
  overflow: hidden;
}
.buy-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  border-radius: 5px;
  overflow: hidden;
}
</style>